<template>
    <view class="container">
        <!-- 搜索框 -->
        <view class="search-box">
            <uni-search-bar placeholder="搜索商品或服务" @confirm="search" v-model="pagination.key" />
        </view>

        <!-- 轮播图 -->
        <swiper class="swiper" :autoplay="true" :interval="3000">
            <swiper-item v-for="(item, index) in swiperList" :key="index">
                <image :src="item.image" mode="aspectFill" class="swiper-img" />
            </swiper-item>
        </swiper>

        <!-- 服务类型切换 -->
        <view class="section-title">
            <uni-segmented-control :current="currentIndex" :values="['汽车用品', '汽车服务']" @clickItem="onClickItem"
                style-type="button" active-color="#ff5500" />
        </view>

        <!-- 商品列表 -->
        <view class="goods-list">
            <uni-list>
                <uni-list-item v-for="(item, index) in goodsList" :key="index" :title="item.name"
                    :note="item.description" clickable @click="goToDetail(item)">
                    <template v-slot:header>
                        <image :src="getImagePath(item)" class="goods-image" />
                    </template>
                    <template v-slot:footer>
                        <view class="goods-footer">
                            <text class="price">¥{{ ((item.price*item.discount/100)-item.deduction).toFixed(2) }}</text>
                            <uni-icons type="cart-filled" size="24" color="#ff5500" @click.stop="addToCart(item)" />
                        </view>
                    </template>
                </uni-list-item>
            </uni-list>
            <!-- 加载状态提示 -->
            <uni-load-more :status="loadingStatus" :content-text="{
                contentdown: '上拉显示更多',
                contentrefresh: '正在加载...',
                contentnomore: '没有更多数据了'
            }" />
        </view>
        <tab-bar :current-index="0" />
    </view>
</template>

<script>
    import {
        getCarServicesPagination,
        getCarSuppliesPagination
    } from '../../apis/product';
    import cf from '../../tools/cf';
    import {
        isLogin
    } from '../../tools/tools';
    import tabBar from '@/components/tabBar.vue';

    export default {
        components: {
            tabBar
        },
        data() {
            return {
                currentIndex: 0,
                swiperList: [{
                        image: '/static/banner1.jpg'
                    },
                    {
                        image: '/static/banner2.jpg'
                    },
                    {
                        image: '/static/banner3.jpg'
                    }
                ],
                goodsList: [],
                pagination: {
                    page: 1, // 改为从1开始
                    limit: 10,
                    key: ""
                },
                total: 0,
                loadingStatus: 'more' // 加载状态：more|loading|noMore
            }
        },
        mounted() {
            this.loadData(true);
        },
        methods: {
            // 统一加载数据方法
            async loadData(isRefresh = false) {
                if (this.loadingStatus === 'loading') return;

                this.loadingStatus = 'loading';

                try {
                    const params = {
                        page: isRefresh ? 1 : this.pagination.page,
                        limit: this.pagination.limit,
                        key: this.pagination.key
                    };

                    const api = this.currentIndex === 0 ?
                        getCarSuppliesPagination :
                        getCarServicesPagination;
                    const res = await api(params);

                    if (res.code >= 0) {
                        this.total = res.data.total;
                        this.goodsList = isRefresh ?
                            res.data.data : [...this.goodsList, ...res.data.data];

                        this.pagination.page = params.page + 1;

                        // 判断是否还有更多数据
                        this.loadingStatus = this.goodsList.length >= this.total ?
                            'noMore' :
                            'more';
                    }
                } catch (error) {
                    console.error(error);
                    uni.showToast({
                        title: '加载失败',
                        icon: 'none'
                    });
                } finally {
                    if (isRefresh) uni.stopPullDownRefresh();
                }
            },

            // 切换分类
            onClickItem(e) {
                if (this.currentIndex === e.currentIndex) return;
                this.currentIndex = e.currentIndex;
                this.loadData(true);
            },

            // 搜索
            search() {
                this.loadData(true);
            },

            // 触底加载
            onReachBottom() {
                if (this.loadingStatus === 'more') {
                    this.loadData();
                }
            },

            addToCart(item) {
                uni.showToast({
                    title: '已加入购物车：' + item.name,
                    icon: 'none'
                });
            },

            goToDetail(item) {
                uni.navigateTo({
                    url: `/pages/product/productDetail?id=${item.id}`
                });
            },
            getImagePath(item) {
                switch (item.productCategory) {
                    case "sys_car_supplies":
                        return cf.BASE_URL + "/Images/Product/CarSupplies/" + item.id + "/" + item.images.split(',')[0]
                    case "car_services":
                        return cf.BASE_URL + "/Images/Product/CarServices/" + item.id + "/" + item.images.split(',')[0]
                    default:
                        return ""
                }
            }
        },
        onShow() {
            isLogin()
        }
    }
</script>

<!-- 样式保持不变 -->

<style scoped>
    .container {
        background-color: #f5f5f5;
        min-height: calc(100vh - 100rpx);
        padding: 0 0 100rpx 0;
    }

    .swiper {
        height: 300rpx;
        margin: 20rpx;
        border-radius: 16rpx;
        overflow: hidden;
    }

    .swiper-img {
        width: 100%;
        height: 100%;
    }

    .category-icon {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 10rpx;
    }

    .category-text {
        font-size: 24rpx;
        color: #666;
    }

    .section-title {
        margin: 30rpx 20rpx;
    }

    .goods-list {
        margin: 0 20rpx;
        border-radius: 16rpx;
        overflow: hidden;
    }

    .goods-image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 8rpx;
    }

    .goods-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .price {
        color: #ff5500;
        font-size: 32rpx;
        font-weight: bold;
    }
</style>